<template>
  <div class="formData">
    <div class="item" style="margin-bottom:24px;">
      <img src="@/assets/image/icon_account.png" alt="">
      <a-input v-model="userName" :maxLength="11" @change="messageerror = ''" placeholder="请输入手机号码" class="input" />
    </div>
    <div class="item">
      <img src="@/assets/image/icon_password.png" alt="">
      <a-input-password v-model="password" @change="messageerror = ''" placeholder="请输入密码" class="input_password" />
    </div>
    <div class="item operation">
      <div class="left">
        <a-checkbox v-model="rememberPassword">
          下次自动登录
        </a-checkbox>
      </div>
      <div class="right">
        <a href="javascript:;" @click="$refs.ForgetPassword.visible = true">忘记密码？</a>
      </div>
    </div>
    <div class="item" style="margin-top:43px;">
      <p class="messageerror">{{messageerror}}</p>
      <a-button class="button" type="primary" ref="btn" :loading="loading" @click="login" size="large">登录</a-button>
    </div>

    <!-- 找回密码 -->
    <ForgetPassword @closelogin="closeLoginModel" ref="ForgetPassword" />
  </div>
</template>

<script>
// 找回密码
import ForgetPassword from '@/components/popup/ForgetPassword/index.vue'
export default {
  components: { ForgetPassword },
  inject:['reload'],
  data(){
    return {
      messageerror:"",
      consentClause:false,
      loading:false,
      userName:localStorage.getItem("userName")?localStorage.getItem("userName"):"",
      password:localStorage.getItem("password")?localStorage.getItem("password"):"",
      rememberPassword:localStorage.getItem("rememberPassword") == 'true'
    }
  },
  mounted(){
    
  },
  methods:{
    closeLoginModel(){
      this.$emit('closeModel');
    },
    login(){
      // console.log(this.consentClause)
      if(!this.consentClause){
        this.messageerror = '请阅读并同意用户协议！';
        // this.$message.info('请阅读并同意用户协议！')
      }else if(!this.userName){
        this.messageerror = '请输入手机号码';
        // this.$message.error("请输入手机号码");
      }else if(!/^1[3-9]\d{9}$/.test(this.userName)){
        this.messageerror = '请输入正确的手机号码';
        // this.$message.error("请输入正确的手机号码");
      }else if(!this.password){
        this.messageerror = '请输入密码';
        // this.$message.error("请输入密码");
      }else{
        this.loading = true;
        this.$ajax({
          url:"/authority/user/login",
          method:"post",
          params:{
            userName:this.userName,
            password:this.password
          }
        }).then((res)=>{
          if(res.code == 200){
            if(this.rememberPassword){
              localStorage.setItem('rememberPassword',this.rememberPassword);
              localStorage.setItem('userName',this.userName);
              localStorage.setItem('password',this.password);
            }else{
              localStorage.setItem('rememberPassword',false);
              localStorage.setItem('userName','');
              localStorage.setItem('password','');
            }
            this.$message.success("登录成功")
            this.$store.commit('changelocalImgFlag',res.data.localImgFlag);
            this.$store.commit('changenickName',res.data.userinfo.nickName);
            this.$store.commit('changeresumeNo',res.data.userinfo.resumeNo);
            this.$store.commit('changepwdFlag',res.data.pwdFlag);
            this.$store.commit('changeroleType',res.data.userinfo.roleType);
            this.$store.commit('changemobile',res.data.userName);
            this.$store.commit('changepicture',res.data.userinfo.picture);
            this.$store.commit('changeToken',res.data.token);
            this.$store.commit('changeuserName',res.data.userName);
            this.$emit('closeModel');
            this.reload()
            // this.$router.go(0)
          }else{
            this.loading = false;
            // this.$message.error(res.msg);
            this.messageerror = res.msg;
            localStorage.setItem('rememberPassword',false);
            localStorage.setItem('userName','');
            localStorage.setItem('password','');
          }
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.item{
  position: relative;
  >img{
    position: absolute;
    left: 12px;
    z-index: 9;
    width: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none
  }
  .messageerror{
    position: absolute;
    left: 0px;
    top: -30px;
    color:#FF3333;
  }
}
.operation{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 40px;
  a{
    margin: 0;
    color: @theme;
  }
}
.input{
  height: 48px;
  padding-left: 40px;
}
.input_password{
  /deep/.ant-input{
    height: 48px;
    padding-left: 40px;
  }
}
.button{
  height: 48px;
  width: 100%;
}
</style>
